import React from 'react';

import { useNavigate } from 'react-router-dom';

import '../../../App/index.css'
import style from '../css/item.module.css'

const Index = (props) => {
    const navigate = useNavigate()
    const { item } = props
    const slogoStr = (slogo) => {
        return slogo.length > 10 ? slogo.slice(0, 10) + '...' : slogo
    }
    const labelsArr = (labels) => {
        return labels.join("/")
    }
    const handleDetailClick = (id) => {
        navigate(`/movie/detail?id=${id}`)
    }
    return (
        <div className={`${style.content} ${style.flex}`}>
            <div className="flex" onClick={handleDetailClick.bind(this, item._id)}>
                <img className={style.img} src={item.pic} alt="" />
                <div>
                    <div className={style.title}>{item.title}</div>
                    <div className={style.rating}>观众评分：<span className={style.fen}>{item.rating}</span></div>
                    <div className={style.slogo}>{slogoStr(item.slogo)}</div>
                    <div className={style.bewrite}>{slogoStr(labelsArr(item.labels))}</div>
                </div>
            </div>
            <button className={`${style.btn} ${style.buy_btn}`}>购票</button>
        </div>
    );
}

export default Index;
